<template>
  <div class="full-box ysqgzt-layout d-flex-c bg-white">
    <div class="ysqgzt-header flex-between p-h-s flex-0">
      <div class="c-white f-36 f-w6 flex-ai-c logo-title">
        <el-image :src="logoSrc" />
        <div>
          <div
            class="f-28 cn"
          >
            河北省雨水情监测预报业务平台
          </div>
          <div
            class="f-12 f-w4"
          >
            Hebei Province rainwater monitoring and forecasting service platform
          </div>
        </div>
      </div>
      <div
        class="
            flex-ai-c right-btn"
      >
        <el-button
          icon="el-icon-s-marketing"
          type="text"
          @click="openSys('ysqjcdp')"
        >
          数字看板
        </el-button>
        <el-button
          icon="el-icon-s-management"
          type="text"
          @click="openSys('ysqjc')"
        >
          通用支撑
        </el-button>
        <el-divider
          direction="vertical"
          class="m-h-mini"
        />
        <el-button
          icon="el-icon-s-tools"
          type="text"
          @click="platformVisible=true"
        >
          配置工作台
        </el-button>
        <div class="flex-ai-c m-l-mini c-white f-16">
          <i class="el-icon-user-solid m-r-tiny" /><span>{{ userInfo.userName }}</span>
        </div>
      </div>
    </div>
    <div
      class="ysqgzt-main flex-1 "
      style="overflow: hidden;"
    >
      <BKAnalysisMaker
        :set-mode="false"
        :page-config="pageConfig"
        ref="analysisMaker"
        class="analysis-page"
        :is-modal="true"
        @invokeAMakerMethod="invokeAMakerMethod"
        is-basic-mode
        v-if="pageConfig"
      />
      <el-empty v-else />
    </div>
    <Platform
      v-if="platformVisible"
      :visible="platformVisible"
      @close="platformVisible=false"
      @refresh="loadConfig"
      :open-page="openPage"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Platform from './platform'
import BKAnalysisMaker from 'bk-analysis-maker'
// import BKAnalysisMaker from '../../../../../bk-analysis-maker/packages'
import Vue from 'vue'
import { publicPath } from '@/configs'
import store from '@/store'
Vue.use(BKAnalysisMaker, {
  getStore: (value) => {
    const props = value.split('.')
    let res = store
    for (let i = 0; i < props.length; i++) {
      if (props[i] === '$store') {
        continue
      }
      res = res[props[i]]
    }
    return res || ''
  }
})
const appId = 'YSJC'
const bzCode = 'YSJC'
export default {
  name: 'GztLayout',
  components: { Platform },
  data () {
    return {
      platformVisible: false,
      pageConfig: null,
      logoSrc: require('@/assets/images/logo.png'),
      openPage: null
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.loadConfig()
    const timer = setInterval(() => {
      this.$refs.analysisMaker && this.$refs.analysisMaker.setParams({ name: 'time', value: new Date().getTime() }, true)
    }, 1000 * 60 * 5)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  methods: {
    openSys (name) {
      window.open(publicPath + '#/' + name)
    },
    async loadConfig () {
      this.pageConfig = null
      const res = await this.$request.post('/ysjc/zhzs/getUserPageOption', {
        appId,
        bzCode
      })
      let config = null
      this.openPage = res.page ? { pageId: res.page.PAGEID, fList: res.fjlist } : null
      if (res.page && res.page.PAGE_CFG) {
        const cfg = JSON.parse(res.page.PAGE_CFG)
        this.setCfg(cfg, res.charlist)
        config = cfg
      }
      this.pageConfig = config
    },
    invokeAMakerMethod (name) {
      const params = Array.from(arguments).slice(1)
      if (name === 'getOpenPageConfig') {
        this.getOpenPageConfig(...params)
      }
    },
    async getOpenPageConfig (openPage, callback) {
      const res = await this.$request.post('/ysjc/zhzs/getPageOption', {
        appId,
        bzCode,
        PAGEID: openPage.id
      })
      let config = null
      if (res.page && res.page.PAGE_CFG) {
        const cfg = JSON.parse(res.page.PAGE_CFG)
        this.setCfg(cfg, res.charlist)
        config = cfg
      }
      callback(config)
    },
    async getPageConfig (id) {
      const res = await this.$request.post('/ysjc/zhzs/getPageOption', {
        appId,
        bzCode,
        PAGEID: id
      })
      let config = null
      if (res.page && res.page.PAGE_CFG) {
        const cfg = JSON.parse(res.page.PAGE_CFG)
        this.setCfg(cfg, res.charlist)
        config = cfg
      }
      this.pageConfig = config
    },
    setCfg (data, list) {
      const cfg = list.filter(c => c.COMPONENTID === data.id)
      if (cfg.length > 0) {
        data.tabList = cfg.map(item => { return JSON.parse(item.CHART_OPTION) })
        data.tabList.sort((a, b) => {
          return a.tabord - b.tabord
        })
      }
      if (data.layout) {
        for (let i = 0; i < data.layout.length; i++) {
          this.setCfg(data.layout[i], list)
        }
      }
      if (data.tabList && data.isTabLayout) {
        for (let i = 0; i < data.tabList.length; i++) {
          this.setCfg(data.tabList[i], list)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ysqgzt-header {
  height: 80px;
  width: 100%;
  background: #029cff url("~@/assets/images/ysqgzt/top-bg.png") no-repeat left top;
  background-size: 100% 100%;

  .logo-title {
    .el-image {
      height: 60px;
      margin-right: 12px;
    }

    .cn {
      letter-spacing: 1px;
      padding-bottom: 2px;
    }
  }

  .right-btn {
    color: #fff;

    ::v-deep {
      .el-button.el-button--text {
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        margin-right: 6px;
        margin-left: 6px;

        i {
          font-size: 18px;
        }

        span {
          font-size: 16px;
        }

        &:hover {
          text-shadow: #040272 1px 2px 1px;
        }
      }
    }
  }
}

.ysqgzt-main {
  ::v-deep {
    .analysis-page.analysis-maker-wrapper {
      .layout-wrapper.default-theme {
        // background-color: #f1f3f6 !important;

        // .chart-title {
        //   border-bottom-color: #e4e7ed !important;
        // }

        .vue-grid-item {
          // border: 1px solid #f2f3f4;

          .tab-btn {
            padding: 0 1px;
            height: 40px;
            line-height: 40px;
            margin-right: 16px;
            margin-left: 6px;
          }

          .tab-btn-active {
            color: #010820 !important;
            font-size: 18px;
            font-weight: 600;
            background: url("~@/assets/images/ysqgzt/line.jpg") no-repeat right bottom;
            background-size: auto 3px;
          }

          // .preview-tab {
          //   & .el-tabs__header .el-tabs__nav-wrap::after {
          //     background-color: #e4e7ed;
          //     height: 1px;
          //   }
          // }

          .explain-cotent {
            position: absolute;
            z-index: 99;
            width: 100%;
            left: 0 !important;
            right: 0 !important;
            top: 6px !important;

            .top-titel {
              height: 35px;
              position: relative;
              display: flex;
              border-bottom: 1px solid #f2f3f4;
              justify-content: space-between;
              align-items: center;

              > span.big-text {
                color: #010820;
                font-size: 18px;
                font-weight: 600;
                line-height: 40px;
                position: relative;
                background: url("~@/assets/images/ysqgzt/line.jpg") no-repeat right bottom;
                background-size: auto 3px;
                margin-left: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              > span.small-text {
                font-size: 14px;
                font-weight: 400;
                color: #5f6064;
                margin-right: 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}

</style>
